<script setup>
import { ref, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
// 假设后续会创建API文件
// import { addApi, updateApi } from '@/api/stocktaking/info'

const emit = defineEmits(['refresh'])

const dialogVisible = ref(false)
const isViewMode = ref(false)

const dialogFormData = ref({
  id: null,
  targetWarehouseId: null,
  targetWarehouseAreaId: null,
  targetWarehouseAreaLocaId: null,
  skuId: null,
  bookCount: null,
  correctCount: null,
  discrepancyCount: null,
  category: 1,
  status: 1,
  empId: null,
  stocktakingTaskId: null,
  saasId: null,
  createBy: null,
  updateBy: null,
  isDel: 1
})

// 类型选项
const categoryOptions = [
  { value: 1, label: '滚动盘点' },
  { value: 2, label: '定时盘点' }
]

// 状态选项
const statusOptions = [
  { value: 1, label: '未确认' },
  { value: 2, label: '已确认' },
  { value: 3, label: '已调整' }
]

// 表单验证规则
const rules = {
  targetWarehouseId: [
    { required: true, message: '请输入仓库ID', trigger: 'blur' }
  ],
  targetWarehouseAreaId: [
    { required: true, message: '请输入库区ID', trigger: 'blur' }
  ],
  targetWarehouseAreaLocaId: [
    { required: true, message: '请输入库位ID', trigger: 'blur' }
  ],
  skuId: [
    { required: true, message: '请输入规格ID', trigger: 'blur' }
  ],
  bookCount: [
    { required: true, message: '请输入账面数量', trigger: 'blur' }
  ],
  correctCount: [
    { required: true, message: '请输入盘点数量', trigger: 'blur' }
  ]
}

// 重置表单
const resetForm = () => {
  dialogVisible.value = false
  isViewMode.value = false
  dialogFormData.value = {
    id: null,
    targetWarehouseId: null,
    targetWarehouseAreaId: null,
    targetWarehouseAreaLocaId: null,
    skuId: null,
    bookCount: null,
    correctCount: null,
    discrepancyCount: null,
    category: 1,
    status: 1,
    empId: null,
    stocktakingTaskId: null,
    saasId: null,
    createBy: null,
    updateBy: null,
    isDel: 1
  }
}

// 计算差异数量
const calculateDiscrepancy = () => {
  const bookCount = parseInt(dialogFormData.value.bookCount) || 0
  const correctCount = parseInt(dialogFormData.value.correctCount) || 0
  dialogFormData.value.discrepancyCount = correctCount - bookCount
}

// 确认提交
const confirm = async () => {
  if (isViewMode.value) {
    resetForm()
    return
  }

  // 表单验证
  // 这里应该使用 el-form 的 validate 方法，简化处理
  if (!dialogFormData.value.targetWarehouseId || 
      !dialogFormData.value.targetWarehouseAreaId ||
      !dialogFormData.value.targetWarehouseAreaLocaId ||
      !dialogFormData.value.skuId ||
      dialogFormData.value.bookCount === null ||
      dialogFormData.value.correctCount === null) {
    ElMessage.error('请填写必填项')
    return
  }

  try {
    // 根据是否有ID判断是新增还是更新
    // if (dialogFormData.value.id) {
    //   await updateApi(dialogFormData.value)
    // } else {
    //   await addApi(dialogFormData.value)
    // }
    
    ElMessage.success('操作成功')
    resetForm()
    emit('refresh')
  } catch (error) {
    ElMessage.error('操作失败: ' + error.message)
  }
}

defineExpose({
  dialogVisible,
  dialogFormData,
  isViewMode,
  resetForm
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isViewMode ? '查看盘点信息' : (dialogFormData.id ? '编辑盘点信息' : '新增盘点信息')"
    width="600px"
    :close-on-click-modal="false"
  >
    <el-form
      :model="dialogFormData"
      :rules="rules"
      label-width="120px"
      :disabled="isViewMode"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="仓库ID" prop="targetWarehouseId">
            <el-input
              v-model.number="dialogFormData.targetWarehouseId"
              placeholder="请输入仓库ID"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库区ID" prop="targetWarehouseAreaId">
            <el-input
              v-model.number="dialogFormData.targetWarehouseAreaId"
              placeholder="请输入库区ID"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="库位ID" prop="targetWarehouseAreaLocaId">
            <el-input
              v-model.number="dialogFormData.targetWarehouseAreaLocaId"
              placeholder="请输入库位ID"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格ID" prop="skuId">
            <el-input
              v-model.number="dialogFormData.skuId"
              placeholder="请输入规格ID"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="账面数量" prop="bookCount">
            <el-input
              v-model.number="dialogFormData.bookCount"
              placeholder="请输入账面数量"
              @blur="calculateDiscrepancy"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="盘点数量" prop="correctCount">
            <el-input
              v-model.number="dialogFormData.correctCount"
              placeholder="请输入盘点数量"
              @blur="calculateDiscrepancy"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="差异数量">
            <el-input
              v-model.number="dialogFormData.discrepancyCount"
              placeholder="差异数量"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="category">
            <el-select v-model="dialogFormData.category" placeholder="请选择类型">
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="dialogFormData.status" placeholder="请选择状态">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工ID" prop="empId">
            <el-input
              v-model.number="dialogFormData.empId"
              placeholder="请输入员工ID"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务ID" prop="stocktakingTaskId">
            <el-input
              v-model.number="dialogFormData.stocktakingTaskId"
              placeholder="请输入任务ID"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Saas标识" prop="saasId">
            <el-input
              v-model="dialogFormData.saasId"
              placeholder="请输入Saas标识"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button
          v-if="!isViewMode"
          type="primary"
          @click="confirm"
        >
          确定
        </el-button>
        <el-button
          v-else
          type="primary"
          @click="resetForm"
        >
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>